<template>
  <div>
    <el-header><PersonHeader></PersonHeader></el-header>
    <el-divider></el-divider>
    <el-container class="myCcontainer">
      <el-aside style="width: 300px;height: 100%">
        <PersonPhoto></PersonPhoto>
        <PersonMenu></PersonMenu>
      </el-aside>
      <el-main>
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item name="2">
            <template slot="title">
              <h2>基本资料</h2>
            </template>
            <div class="qzclass">
              <el-form ref="form" :model="enterpriseForm" style="margin: 20px 0px" label-width="140px" size="mini">
                <el-form-item label="单位名称">
                  <el-input v-model="enterpriseForm.enterpriseName"  placeholder="请输入单位名称"  style="width: 70%;"></el-input>
                </el-form-item>
                <el-form-item label="单位Logo">
<!--                  <el-input v-model="enterpriseForm.logo" placeholder="请输入单位Logo"   style="width: 70%;"></el-input>-->
                  <el-upload
                      class="avatar-uploader"
                      action="http://127.0.0.1/rest/api/file/upload"
                      :multiple="false"
                      name="file"
                      :show-file-list="false"
                      :on-success="handleAvatarSuccess"
                      :before-upload="beforeAvatarUpload">
                    <img v-if="enterpriseForm.logo" :src="enterpriseForm.logo" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>

                </el-form-item>
                <el-form-item label="企业性质">
<!--                  <el-input v-model="enterpriseForm.enterpriseType" placeholder="请输入企业性质"   style="width: 70%;"></el-input>-->
                  <el-select v-model="enterpriseForm.enterpriseType" placeholder="请选择" style="width: 70%">
                    <el-option
                        v-for="item in dict.nat"
                        :key="item.dictValue"
                        :label="item.dictLabel"
                        :value="item.dictValue">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="从事行业">
                  <el-select v-model="enterpriseForm.industry" placeholder="请选择" style="width: 70%">
                    <el-option
                        v-for="item in dict.ind"
                        :key="item.dictValue"
                        :label="item.dictLabel"
                        :value="item.dictValue">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="单位规模">
                  <el-select v-model="enterpriseForm.enterpriseScale" placeholder="请选择" style="width: 70%">
                    <el-option
                        v-for="item in dict.sca"
                        :key="item.dictValue"
                        :label="item.dictLabel"
                        :value="item.dictValue">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="单位区域">
                  <el-input v-model="enterpriseForm.region" placeholder="请输入单位区域"   style="width: 70%;"></el-input>
                </el-form-item>
                <el-form-item label="单位地址">
                  <el-input v-model="enterpriseForm.address" placeholder="请输入单位地址"   style="width: 70%;"></el-input>
                </el-form-item>
                <el-form-item label="单位邮箱">
                  <el-input v-model="enterpriseForm.email" placeholder="请输入单位邮箱"   style="width: 70%;"></el-input>
                </el-form-item>
                <el-form-item label="单位简介">
                  <el-input v-model="enterpriseForm.industryProfile" placeholder="请输入单位简介"   style="width: 70%;"></el-input>
                </el-form-item>
                <el-form-item label="联系人">
                  <el-input v-model="enterpriseForm.contacts" placeholder="请输入联系人"   style="width: 70%;"></el-input>
                </el-form-item>
                <el-form-item label="手机号码">
                  <el-input v-model="enterpriseForm.mobilePhone" placeholder="请输入手机号码"   style="width: 70%;"></el-input>
                </el-form-item>
                <el-form-item label="固定电话">
                  <el-input v-model="enterpriseForm.fixedPhone" placeholder="请输入固定电话"   style="width: 70%;"></el-input>
                </el-form-item>
                <el-form-item label="联系人职位">
                  <el-input v-model="enterpriseForm.contactsJob" placeholder="请输联系人职位"   style="width: 70%;"></el-input>
                </el-form-item>
                <el-form-item label="注册时间">
<!--                  <el-input v-model="enterpriseForm.regDate" placeholder="请输入注册时间"   style="width: 70%;"></el-input>-->
                  <el-date-picker
                      v-model="enterpriseForm.regDate"
                      type="date"
                      placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="注册资金">
                  <el-input v-model="enterpriseForm.regAmt" placeholder="请输入注册资金"   style="width: 70%;"></el-input>
                </el-form-item>
                <el-form-item label="邮政编码">
                  <el-input v-model="enterpriseForm.postalCode" placeholder="请输入邮政编码"   style="width: 70%;"></el-input>
                </el-form-item>
                <el-form-item label="联系QQ">
                  <el-input v-model="enterpriseForm.qq" placeholder="请输入联系QQ"   style="width: 70%;"></el-input>
                </el-form-item>
                <el-form-item label="单位网址">
                  <el-input v-model="enterpriseForm.website" placeholder="请输入单位网址"   style="width: 70%;"></el-input>
                </el-form-item>
                <el-form-item label="交通路线">
                  <el-input v-model="enterpriseForm.trafficRoutes" placeholder="请输入交通路线"   style="width: 70%;"></el-input>
                </el-form-item>
                <el-form-item size="large">
                  <el-button type="submit" style="width: 300px;background-color: #dcdfe6" @click="submitData()">更新基本资料</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-collapse-item>

        </el-collapse>
      </el-main>
    </el-container>
    <el-footer>
      <el-divider></el-divider>
      <el-row :gutter="20">
        <el-col :span="8" :offset="8">
          <footerx></footerx>
        </el-col>
      </el-row>
    </el-footer>
  </div>
</template>

<script>
import footerx from "../footerx";
import Personinfo from "../Personinfo";
import PersonHeader from "./components/PersonHeader";
import PersonMenu from "./components/PersonMenu";
import PersonPhoto from "./components/PersonPhoto";
import {getEnterprise} from "../../assets/util";
import {ListDict} from "../../api/dict";
import {GetEnterprise, SaveEnterprise} from "../../api/user";
export default {
  name: "EnterpriseBasePage",
  components: {PersonPhoto, PersonMenu, PersonHeader, footerx,Personinfo},
  data (){
    return {
      enterprise: {
        enterpriseType:'',
        enterpriseScale:'',
        trafficRoutes:'',
        industryProfile:'',
        website:'',
        qq:'',
        regAmt:'',
        regDate:'',
        contactsJob:'',
        contacts:'',
        fixedPhone:'',
        industry:''
      },
      dict:{
        nat:[],
        ind:[],
        sca:[],
        tre:[],
        wel:[],
        wor:[]
      },
      enterpriseForm:{},
      activeNames: ['1','2','3']
    }
  },
  methods:{
    handleOpen(key, keyPath){
      console.log(key, keyPath);
    },
    handleClose(key, keyPath){
      console.log(key, keyPath);
    },
    handleChange(val) {
      console.log(val);
    },
    handleAvatarSuccess(res, file) {
      // enterpriseForm.logo
      this.enterpriseForm.logo = res.urls;
      //this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isPng = file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG&&!isPng) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return (isJPG||isPng) && isLt2M;
    },
    submitData(){
      SaveEnterprise.r(this.enterpriseForm).then(d=>{
        this.$message(d.data.msg)
      })
    }

  },
  mounted() {

    let enterprise = getEnterprise() ;
    GetEnterprise.r(enterprise.userId).then(d=>{
      this.enterpriseForm = d.data.data ;
    });
    ListDict.r("nat,wor,tre,wel,ind,sca").then(d=>{
      this.dict = d.data.data;
    });
  }
}
</script>

<style scoped>
.myCcontainer{
  margin:0 auto;
  background: azure;
  width: 1200px;
}
.el-main{
  padding: 0px 10px;
}
.el-collapse-item__header{
  font-size: 24px;
  font-weight: bold;
  font-size: x-large;
}
h2{
  margin: 0px 10px;
}
.qzclass{
  font-size: 18px;
  font-family: '微软雅黑'!important;
  margin: 0px 10px;
}
.numerClass{
  font-size: 18px;
  margin: 0px 40px;
  font-family: '微软雅黑'!important;
  color: coral;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>